<template>
  <div class="app-container">

    <el-row>
      <el-col :span="7" v-for="(img, index) in imgList" :key="img.name" :offset="index > 0 ? 1 : 0" >
        <el-card :body-style="{ padding: '0px' }" >
          <div class="demo-image__placeholder">
            <div class="block">
              <el-image :src="img.url" :fit="fit" :preview-src-list="img.urls" :z-index="zindex" @click.stop="handleClickItem" style="width: 400px; height: 300px"></el-image>
            </div>
          </div>
          <div style="padding: 14px;">
            <span>{{img.name}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {orderImg} from "@/api/order/img";
  import defaultSettings from '@/settings'
  export default {
    name: "OrderImg",
    props: {
      orderId: {
        type: Number
      }
    },
    data() {
      return {
        imgpre: defaultSettings.ossPreview,
        fit: 'fill',
        zindex:999,
        imgList: [
          'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        ]
      }
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询订单列表 */
      getList() {
        this.loading = true;
        orderImg(this.orderId).then(response => {
          console.log(response)
         this.imgList = response.data;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      handleClickItem(){
        // 获取遮罩层dom

        this.$nextTick(() => {
          console.log("111111111111111111111111")
          let domImageMask = document.querySelector(".el-image-viewer__mask");
          if (!domImageMask) {
            console.log("2222222222222222222222")
            return;
          }
          domImageMask.addEventListener("click", () => {
            // 点击遮罩层时调用关闭按钮的 click 事件
            document.querySelector(".el-image-viewer__close").click();
          });
        })

      }
    }
  };
</script>
<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

</style>
